<template>
	<view>
		<view class="pic_box">
			<view class="pic_title">
				支付金额
			</view>
			<view class="pic_num">
				¥{{order.totalMoney}}
			</view>
		</view>
		<u-gap height="14" bg-color="#ECECEC"></u-gap>
		<view class="mode_box">
			<view class="mdoe_left">
				<image style="width: 80rpx;height: 80rpx;" src="../../static/img/buy_zfb.png" mode="" class="buy_icon">
				</image>

				<view class="mode_title">
					<view class="title">
						支付宝
					</view>
				</view>
			</view>
			<u-radio-group :value="payType" @change="radioChange" active-color='#FF365D'>
				<u-radio :name="2">
				</u-radio>
			</u-radio-group>

		</view>
		<view class="mode_box">
			<view class="mdoe_left">
				<image style="width: 80rpx;height: 66rpx;" src="../../static/img/buy_wx.png" mode="" class="buy_icon">
				</image>
				<view class="mode_title">
					<view class="title">
						微信
					</view>
				</view>
			</view>
			<u-radio-group @change="radioChange" :value="payType" active-color='#FF365D'>
				<u-radio :name="1">
				</u-radio>
			</u-radio-group>
		</view>
		<view class="mode_box">
			<view class="mdoe_left">
				<image style="width: 80rpx;height: 80rpx;" src="../../static/img/yue.png" mode="" class="buy_icon">
				</image>
				<view class="mode_title">
					<view class="title">
						余额
					</view>
				</view>
			</view>
			<u-radio-group @change="radioChange" :value="payType" active-color='#FF365D'>
				<u-radio :name="3">
				</u-radio>
			</u-radio-group>
		</view>
		<u-gap height="14" bg-color="#ECECEC"></u-gap>
		<view style="padding: 30rpx;" class="">
			<u-button type="primary" shape="circle" @click="submit">确认支付</u-button>
		</view>
	</view>
</template>

<script>
	import {
		payment
	} from '@/utils/payment.js'
	export default {
		data() {
			return {
				order: {},
				payType: 1
			};
		},
		computed: {
			// payType() {
			// 	return this.order.payType == 1 ? '微信' : '支付宝'
			// },
		},
		onLoad(e) {
			this.order = JSON.parse(e.order)
			this.payType = this.order.payType
			console.log(this.order)
		},
		methods: {
			radioChange(val) {
				this.payType = val
			},
			async submit() {
				let zfbPay = null
				console.log(this.payType)
				if (this.payType == 2) {
					zfbPay = await this.$u.api.orderAliPay({
						id: this.order.id
					})
					// res = res && res.split('&')
					// res.map(item => {
					// 	item = item.split('=')
					// 	zfbPay[item[0]] = item[1]
					// })
				} else if (this.payType == 1) {
					zfbPay = await this.$u.api.orderWxPay({
						id: this.order.id
					})
				} else {
					await this.$u.api.balancePay({
						id: this.order.id
					})
				}
				try {
					if (this.payType == 1 || this.payType == 2) {
						const res = await payment(this.payType, zfbPay)
						console.log(res, '支付成功')
					}
					uni.showToast({
						title: '支付成功!',
						icon: 'success'
					})
					uni.reLaunch({
						url: '/pages/order/order'
					})
				} catch (e) {
					uni.showToast({
						title: '支付失败!',
						icon: 'error'
					})
					// uni.reLaunch({
					// 	url: '/pages/order/order'
					// })
					console.log(e, '支付失败')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pic_box {
		text-align: center;
		padding: 100rpx 0;

		.pic_num {
			font-size: 46rpx;
			color: #101010;
		}

		.pic_title {
			font-size: 26rpx;
			color: #959595;
		}
	}

	.mode_box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;

		.mdoe_left {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.mode_title {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				// align-items: center;
				.summary {
					color: #8F8F8F;
					font-size: 24rpx;
				}

				.title {
					font-size: 28rpx;
					font-weight: 600;
					color: #000000;
					display: flex;
					align-items: center;

					.tag {
						width: 143rpx;
						height: 45rpx;
						background-color: rgba(22, 164, 255, 100);
						color: rgba(255, 255, 255, 100);
						border-radius: 42rpx;
						margin-left: 10rpx;
						line-height: 45rpx;
						text-align: center;
						font-size: 26rpx;
					}
				}
			}

			.buy_icon {
				width: 78rpx;
				min-width: 78rpx;

				height: 78rpx;
				margin-right: 21rpx;
			}
		}
	}
</style>
